<template>
  <div class="content">
    <dt-search ref="search" @reset="resetFun" />

    <Tabs
      v-if="$route.name !== 'levelApprovalManager'"
      v-model="status"
      type="card"
      :animated="false"
      @on-click="onChange">
      <TabPane label="待审批" name="0"></TabPane>
      <TabPane label="已通过" name="1"></TabPane>
      <TabPane label="已驳回" name="2"></TabPane>
    </Tabs>

    <dt-grid ref="table" :columns="columns" page :onFetch="onFetch" />

    <process-modal ref="process" />
  </div>
</template>

<script>
  import processModal from '@/components/biz/audit/process-modal.vue'
  import columnOpt from './opt/column.js'
  import searchOpt from './opt/search.js'
  import auditMgr from '@/biz/flowApproval/processAudit.js'
  import dt from '@dt/dt'

  export default {
    components: {
      processModal
    },
    data() {
      return {
        columns: [],
        status: '0'
      }
    },
    watch: {
      $route(to, from) {
        let retainParams = dt.memory.get('levelApprovalManager')

        if (to.name == 'levelApprovalManager') {
          this.$refs.search.init(this.$refs.table, searchOpt.options(this.$route.name), {
            state: retainParams?.state,
            housesId: retainParams?.housesId,
            companyId: retainParams?.companyId,
            housesName: retainParams?.housesName
          })
          this.$refs.table.fetch()
        }
      }
    },
    mounted() {
      let retainParams = dt.memory.get('levelApprovalManager')

      this.columns = columnOpt.options(this.status, this.$route.name)
      this.$refs.table.init(this)
      this.$refs.search.init(this.$refs.table, searchOpt.options(this.$route.name), {
        orgId: [],
        housesId: retainParams?.housesId,
        companyId: retainParams?.companyId,
        housesName: retainParams?.housesName,
        state: this.$route.name === 'levelApprovalManager' ? retainParams?.state : null
      })
      this.$refs.table.fetch()
    },
    methods: {
      resetFun() {
        dt.memory.remove('levelApprovalManager')
        this.$refs.search.init(this.$refs.table, searchOpt.options(this.$route.name), {
          orgId: [],
          housesId: '',
          state: this.$route.name === 'levelApprovalManager' ? '' : null
        })
      },
      onChange() {
        this.columns = columnOpt.options(this.status, this.$route.name)
        this.$refs.table.init(this)
        this.$refs.table.fetch(true)
      },
      onAudit(data) {
        this.$router.push({
          name: 'levelPointsAudit',
          query: {
            auditId: data.auditId,
            rankPointsId: data.businessId,
            housesId: data.housesId
          }
        })
      },
      onDetail(data) {
        this.$router.push({
          name:
            this.$route.name == 'levelApprovalManager'
              ? 'levelPointsApprovalDetail'
              : 'levelPointsAuditDetail',
          query: {
            rankPointsId: data.businessId,
            housesId: data.housesId
          }
        })
      },
      onFlow(data) {
        this.$refs.process.show({
          ...data,
          auditType: 2
        })
      },
      onFetch(data) {
        dt.memory.get('levelApprovalManager')?.UContainSelf !== undefined &&
          (data.containSelf = !dt.memory.get('levelApprovalManager'))

        return auditMgr.list({
          ...data,
          auditType: 2,
          buttonType: this.$route.name === 'levelApprovalManager' ? '-1' : this.status,
          sortMethod: this.status == '0' ? 'asc' : 'desc'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    padding: 20px;
  }
</style>
